<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			html,
			body {
				height: 100%;
				overflow: hidden;
			}

			#wrap {
				position: relative;
				margin: 100px auto;
				width: 300px;
				height: 300px;
				border: 1px solid;
			}

			#test {
				position: absolute;
				left: 50%;
				top: 50%;
				/*
				居中
				这里有一个局限性。
				如果下面的 test 也使用transform，那么当前的将会被覆盖。
				*/
				/* transform: translate3d(-50%,-50%,0); */

				/*
				最终使用这个
				*/
				margin-left: -50px;
				margin-top: -50px;
				width: 100px;
				height: 100px;
				background: pink;

				text-align: center;
				font: 30px/100px "agency fb";

				border-radius: 50%;

				/* transition: 3s; */
				animation-name: move;
				animation-duration: 5s;
				
				/* animation-delay: 2s; */
				
				animation-timing-function: steps(1, start);
				/* animation-timing-function: cubic-bezier(0.1,0.7,1.0,0.1); */
				/*动画运行的次数*/
				animation-iteration-count: 3;
				animation-direction: alternate;

				animation-fill-mode: both;
			}

			/* 
			这里的百分比是 时间点
			0%-50%是第一个关键帧周期
			50%-100%是第二个关键帧周期
			整个过程是“动画周期”
			*/
			@keyframes move {
				0% {
					transform: translateY(-100px);
				}
				
				40% {
					transform: translateY(-50px);
				}

				50% {
					transform: translateY(90px);
				}

				100% {
					transform: translateY(100px);
				}
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="test">
				111
			</div>
		</div>
	</body>
</html>
